<template>
  <div class="rank-wrap" ref="rankwrap">
    <scroll :data="officialList" class="rank-item-wrap" ref="scrollref">
      <div>
        <van-loading v-show="!officialList.length" type="circular" color="#fff" vertical>正在加载排行榜...</van-loading>
        <ul v-if="officialList.length">
          <li class="category">
            <div class="title">官方榜</div>
            <rank-card
              v-for="(item, index) in officialList"
              :key="index"
              :imgUrl="item.coverImgUrl"
              :tracks="item.tracks"
              :idx="item.name"
              :updateTime="item.updateFrequency"
              @showIdxPage="showIdxPage(item)"
            ></rank-card>
          </li>
          <li class="category">
            <div class="title">推荐榜</div>
            <div class="item-flex-row">
              <rank-cardimg
                v-for="(item, index) in recommendList"
                :key="index"
                :imgUrl="item.coverImgUrl"
                :dec="item.name"
                :updateTime="item.updateFrequency"
                :idx="item.name"
                @showIdxPage="showIdxPage(item)"
              ></rank-cardimg>
            </div>
          </li>
          <li class="category">
            <div class="title">更多榜单</div>
            <div class="item-flex-row">
              <rank-cardimg
                v-for="(item, index) in morerankList"
                :key="index"
                :imgUrl="item.coverImgUrl"
                :dec="item.name"
                :updateTime="item.updateFrequency"
                :idx="item.name"
                @showIdxPage="showIdxPage(item)"
                lines="one"
              ></rank-cardimg>
            </div>
          </li>
        </ul>
      </div>
    </scroll>
  </div>
</template>

<script>
import { getRankingList, getRankDetail } from "@/request/api";
import RankCard from "@/base/rank-card/rank-card.vue";
import { playListMixin } from "@/common/mixin.js";
import RankCardimg from "@/base/rank-card/rank-cardImg.vue";
import Scroll from "@/base/scroll/scroll";
import { mapMutations } from "vuex";
export default {
  mixins: [playListMixin],
  data() {
    return {
      officialList: [],
      recommendList: [],
      morerankList: []
    };
  },
  activated() {
    this.$refs.scrollref.refresh();
  },
  created() {
    this._getRankList();
    this._getRankDetail();
  },
  methods: {
    async _getRankList() {
      const res = await getRankingList();
    },
    async _getRankDetail() {
      const res = await getRankDetail();
      if (res.code !== 200) {
        this.$toast("获取排行榜失败!");
      }
      this.officialList = res.list.slice(0, 4);
      this.recommendList = res.list.slice(4, 10);
      this.morerankList = res.list.slice(10);
    },
    showIdxPage(item) {
      console.log(item);

      // this.$router.push({ name: "albumPage", params: { idxId: id } });
      this.$router.push({
        name: "songsheet",
        query: { id: item.id }
      });
      this.setSonngSheet(item);
      this.setSongSheetType("排行榜");
    },
    handlePlayList(playlist) {
      const bottom = playlist.length > 0 ? "60px" : "";
      this.$refs.rankwrap.style.bottom = bottom;
      this.$refs.scrollref.refresh();
    },
    ...mapMutations({
      setSonngSheet: "SET_SONGSHEET",
      setSongSheetType: "SET_SONGSHEET_TYPE"
    })
  },
  components: {
    RankCard,
    RankCardimg,
    Scroll
  }
};
</script>

<style lang="less" scoped>
.rank-wrap {
  position: fixed;
  top: 88px;
  bottom: 0;
  width: 100%;
  z-index: -1;
}
.rank-item-wrap {
  height: 100%;
  overflow: hidden;
}
.title {
  margin: 0 20px;
  font-size: 17px;
  font-weight: bold;
  // margin-top: 36px;
}
.category {
  padding-top: 30px;
  // padding-bottom: 20px;
  .item-flex-row {
    padding: 0 20px;
    .flex-row-wrap;
  }
}
</style>